<!-- Page header -->
<style>
      .container {
       height: 180px;
       overflow-y: scroll;
      margin-top: 80px;
      }
      .data, th, td {
       border: 1px solid black;
       border-collapse: collapse;
       padding: 4px;

      }
      #overlay {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    font-size: 16px;
    /* IE9以下不支持rgba模式 */
    background-color: rgba(0, 0, 0, 0.5);
    /* 兼容IE8及以下 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
    display: none;
  }
  /* 弹出框主体 */
  .popup {
    background-color: #ffffff;
    max-width: 700px;
    min-width: 200px;
    border-radius: 5px;
    margin: 100px auto;
    text-align: center;
  }
  /* 弹出框的标题 */
  .popup_title {
    height: 60px;
    line-height: 60px;
    border-bottom: solid 1px #cccccc;
  }
  /* 弹出框的内容 */
  .popup_content {
    height: 50px;
    line-height: 50px;
    padding: 15px 20px;
  }
  /* 弹出框的按钮栏 */
  .popup_btn {
    padding-bottom: 10px;
  }
  /* 弹出框的按钮 */
  .popup_btn button {
    color: #778899;
    width: 40%;
    height: 40px;
    cursor: pointer;
    border: solid 1px #cccccc;
    border-radius: 5px;
    margin: 5px 10px;
    color: #ffffff;
    background-color: #337ab7;
  }
</style>
<div class="container">
  <div>学生用户账号：</div>
  <hr>
  <table border="1px" id="tab1" class="data" >
    <thead>
      <tr>
        <th>用户名&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>昵称&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>电话号码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>邮箱&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>性别&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>年级&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>学院&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>专业&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>创建时间&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        <th>账号删除&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
      </tr>
    </thead>
    <tbody id = "tb"></tbody>
  </table>
</div>


  <div class="container"  id="sas_div">
    <div>咨询师账号信息：<input type="button" value="注册账号"  id="add"></div>
    <hr>
    <table border="1px" id="tab2" class="data">
      <thead>
        <tr>
          <th>用户名&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
          <th>昵称&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
          <th>电话号码&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
          <th>邮箱&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
          <th>性别&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
          <th>咨询师类型&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
          <th>创建时间&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
          <th>账号删除&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</th>
        </tr>
      </thead>
      <tbody id = "tb2"></tbody>
    </table>
  </div>

<hr>
<div style="text-align:center;" ><input type="button" value="确认"  id="cmdSub1"></div>
<div id="overlay">
  <div class="popup">
    <p class="popup_title">注册</p>
    <!-- 用户名 -->
    <div class="mb-3">
      <label class="form-label required">用户名</label>
      <input type="text" class="form-control " placeholder="请输入用户名" name="username" id="username">
      <div class="invalid-feedback">用户名不能为空</div>
    </div>
    <!-- 昵称 -->
    <div class="mb-3">
      <label class="form-label required">昵称</label>
      <input type="text" class="form-control" placeholder="请输入昵称" name="nickname" id="nickname">
      <div class="invalid-feedback">昵称不能为空</div>
    </div>
     <!-- 咨询师类型 -->
     <div class="mb-3">
      <label class="form-label required">咨询师类型</label>
      <input type="text" class="form-control" placeholder="请输入咨询师类型" name="type" id="type">
      <div class="invalid-feedback">咨询师类型不能为空</div>
    </div>
    
    <!-- 性别 -->
    <div class="mb-3">
      <label class="form-label required">性别</label>
      <input type="radio" name="sex" value="男" checked="true" />男
      &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
      <input type="radio" name="sex" value="女" />女
    </div>
  
    <!-- 密码 -->
    <div class="mb-3">
      <label class="form-label required">密码</label>
      <div class="input-group input-group-flat">
        <input type="password" class="form-control" placeholder="请输入密码" autocomplete="off" name="password"
          id="password">
        <span class="input-group-text">
          <a href="javascript:void(0);" class="link-secondary" id="password_a" title="显示密码"
            data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
              <path
                d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" />
            </svg>
          </a>
        </span>
        <div class="invalid-feedback">密码不能为空</div>
      </div>
    </div>
    <!-- 确认密码 -->
    <div class="mb-3">
      <label class="form-label required">确认密码</label>
      <div class="input-group input-group-flat">
        <input type="password" class="form-control" placeholder="再次输入密码" autocomplete="off" name="passwordRepeat"
          id="passwordRepeat">
        <span class="input-group-text">
          <a href="javascript:void(0);" class="link-secondary" id="passwordRepeat_a" title="显示密码"
            data-bs-toggle="tooltip"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
            <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
              stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
              <path
                d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7" />
            </svg>
          </a>
        </span>
        <div class="invalid-feedback">请检查确认密码</div>
      </div>
    </div>
    <div class="popup_btn">
      <button class="cancelBtn" onclick="hidePopup()">取消</button>
      <button class="confirmBtn"  id = "addCon">确认</button>
    </div>
  </div>
</div>




<!-- Page body -->

<script>
  $(function() {


//========================= 查询所有学生账号 =======================
$.ajax({
    type : 'get',
    url : 'stu/selectAll',
    success : function(respDate) {
      //判断状态码
      if(respDate.code == 0) {
       //构造页面
   buidHistoryHtml(respDate.data);
      }else {
        $.toast({
          heading: '警告',
          text: respDate.message,
          icon: 'warning' 
        });
      }
    },
    error : function() {
      $.toast({
        heading: '错误',
        text: '服务器错误，请联系管理员',
        icon: 'error' 
      });
    }

  });

function buidHistoryHtml(data) {
  let table = document.getElementById("tab1");
  let newRow = table.insertRow();

  let tbody = document.getElementById('tb');

  

  
  for(let i = 0; i < data.length; i++) {

    var trow = getDataRow(data[i]);
    tbody.appendChild(trow);
  }
}

function getDataRow(h){  
   var row = document.createElement('tr'); //创建行  
     
   var cellUsername = document.createElement('td'); //创建第一列id  
   cellUsername.innerHTML = h.username; //填充数据  
   row.appendChild(cellUsername); //加入行  ，下面类似  
     
   var cellNickname = document.createElement('td');//创建第二列name  
   cellNickname.innerHTML = h.nickname;  
   row.appendChild(cellNickname);  
     
   var cellPhoneNum = document.createElement('td');//创建第三列job  
   cellPhoneNum.innerHTML = h.phoneNum;  
   row.appendChild(cellPhoneNum);  

 
 var cellEmail = document.createElement('td');//创建第三列job  
 cellEmail.innerHTML = h.email;  
   row.appendChild(cellEmail);  


 var cellGender = document.createElement('td');//创建第三列job  
 cellGender.innerHTML = h.gender;  
   row.appendChild(cellGender);  

 var cellGrade = document.createElement('td');//创建第三列job  
 cellGrade.innerHTML = h.grade;  
   row.appendChild(cellGrade);  

 var cellAcademy = document.createElement('td');//创建第三列job  
 cellAcademy.innerHTML = h.academy;  
   row.appendChild(cellAcademy);  

 var cellSpecialized = document.createElement('td');//创建第三列job  
 cellSpecialized.innerHTML = h.specialized;  
   row.appendChild(cellSpecialized);  

 var cellCreateState = document.createElement('td');//创建第三列job  
 cellCreateState.innerHTML = h.createState;  
   row.appendChild(cellCreateState);  

  
 var cellButton = document.createElement('td');//创建第三列job  
  cellButton.innerHTML = "<input type='button' value='删除' onclick='deleteRow(this)' />";
  row.appendChild(cellButton); 
  return row; //返回tr数据      
}      







//========================= 查询咨询师用户用户测评记录 =======================

function selectAll(){
$.ajax({
  type : 'get',
    url : 'con/selectAll',
    success : function(respDate) {
      //判断状态码
      if(respDate.code == 0) {
       //构造页面
   buidHistoryHtml(respDate.data);
      }else {
        $.toast({
          heading: '警告',
          text: respDate.message,
          icon: 'warning' 
        });
      }
    },
    error : function() {
      $.toast({
        heading: '错误',
        text: '服务器错误，请联系管理员',
        icon: 'error' 
      });
    }
  });

function buidHistoryHtml(data) {
  let table = document.getElementById("tab2");
  let newRow = table.insertRow();

  let tbody = document.getElementById('tb2');

  

  
  for(let i = 0; i < data.length; i++) {

    var trow = getDataRow(data[i]);
    tbody.appendChild(trow);
  }
}

function getDataRow(h){  
   var row = document.createElement('tr'); //创建行  

   var cellUsername = document.createElement('td'); //创建第一列id  
   cellUsername.innerHTML = h.username; //填充数据  
   row.appendChild(cellUsername); //加入行  ，下面类似  
     
   var cellNickname = document.createElement('td');//创建第二列name  
   cellNickname.innerHTML = h.nickname;  
   row.appendChild(cellNickname);  
     
   var cellPhoneNum = document.createElement('td');//创建第三列job  
   cellPhoneNum.innerHTML = h.phoneNum;  
   row.appendChild(cellPhoneNum);  

 
 var cellEmail = document.createElement('td');//创建第三列job  
 cellEmail.innerHTML = h.email;  
   row.appendChild(cellEmail);  


 var cellGender = document.createElement('td');//创建第三列job  
 cellGender.innerHTML = h.gender;  
  row.appendChild(cellGender);  
     
   var cellType = document.createElement('td'); //创建第一列id  
   cellType.innerHTML = h.type; //填充数据  
   row.appendChild(cellType); //加入行  ，下面类似  
     
   var cellCreateState = document.createElement('td');//创建第二列name  
   cellCreateState.innerHTML = h.createState;  
   row.appendChild(cellCreateState);  
     
  var cellButton = document.createElement('td');//创建第三列job  
  cellButton.innerHTML = "<input type='button' value='删除' onclick='deleteRowCon(this)' />";
  row.appendChild(cellButton);  
 return row; //返回tr数据      
}
}
selectAll()

//弹出注册弹窗
$('#add').click(function() {
  var overlay = document.getElementById("overlay");
  overlay.style.display = "block";
});


//注册咨询师用户

$('#addCon').click(function() {
  console.log('进入点击确认');
  let checkForm = true;
    // 校验用户名
    if (!$('#username').val()) {
      $('#username').addClass('is-invalid');
      checkForm = false;
    }
    // 校验昵称
    if (!$('#nickname').val()) {
      $('#nickname').addClass('is-invalid');
      checkForm = false;
    }
    // 校验咨询师类型
    if (!$('#type').val()) {
      $('#type').addClass('is-invalid');
      checkForm = false;
    }
    // 校验密码非空
    if (!$('#password').val()) {
      $('#password').addClass('is-invalid');
      checkForm = false;
    }
    // 校验确认密码非空, 校验密码与重复密码是否相同
    if (!$('#passwordRepeat').val() || $('#password').val() != $('#passwordRepeat').val()) {
      $('#passwordRepeat').addClass('is-invalid');
      checkForm = false;
    }
    // 根据判断结果提交表单
    if (!checkForm) {
      return false;
    }
     // 构造数据
     let postDate = {
      username : $('#username').val(),
      nickname : $('#nickname').val(),
      type : $('#type').val(),
      password : $('#password').val(),
      passwordRepeat : $('#passwordRepeat').val(),
      gender : $("input[name='sex']:checked").val()
    }

    // 发送AJAX请求 
    // contentType = application/x-www-form-urlencoded
    //成功后关闭弹窗
    console.log('路径检查');
    $.ajax ({
      type : 'post',
      url : 'con/register',
      contentType : 'application/x-www-form-urlencoded',
      data : postDate,
      success : function(respDate) {
        if(respDate.code == 0) {
         //验证成功跳转到登录页面
         hidePopup();
         $.toast({
            heading: '成功',
            text: respDate.message,
            icon: 'success' 
          });
        } else {
          $.toast({
            heading: '警告',
            text: respDate.message,
            icon: 'warning' 
          });
        }
      },
      error : function() {
        $.toast({
            heading: '错误',
            text: '服务器错误，请联系管理员',
            icon: 'error' 
          });
      }

    });


})

 // 表单元单独检验
 $('#username, #nickname, #password,#type').on('blur', function () {
    if ($(this).val()) {
      $(this).removeClass('is-invalid');
      $(this).addClass('is-valid');
    } else {
      $(this).removeClass('is-valid');
      $(this).addClass('is-invalid');
    }
  })

  // 检验确认密码
  $('#passwordRepeat').on('blur', function () {
    if ($(this).val() && $(this).val() == $('#password').val()) {
      $(this).removeClass('is-invalid');
      $(this).addClass('is-valid');
    } else {
      $(this).removeClass('is-valid');
      $(this).addClass('is-invalid');
    }
  })


  // 密码框右侧明文密文切换按钮
  $('#passwordRepeat_a').click(function () {
    if($('#passwordRepeat').attr('type') == 'password') {
      $('#passwordRepeat').attr('type', 'text');
    } else {
      $('#passwordRepeat').attr('type', 'password');
    }
  });
  $('#password_a').click(function () {
    if($('#password').attr('type') == 'password') {
      $('#password').attr('type', 'text');
    } else {
      $('#password').attr('type', 'password');
    }
  });


});
  
</script>